<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>

<link href="./Public/login/css/bootstrap.min.css" rel="stylesheet">
<link href="./Public/login/css/signin.css" rel="stylesheet">
<script src="./Public/jquery-1.11.3.min.js"></script>
<style>
    #reg{
        position: relative;
        top:15px;
        left:250px;
        font-weight: 700;
        color: blue;
    }
    #code{
        background:#BDBDBD;
        padding-left: 0;
        width:100px;
        position: relative;
        z-index: 3;
        float: left;
        top:10px;
    }
    .codepic{
        display: block;
        float: left;
        width:150px;
        height:50px;
        position: absolute;
        left:210px;
        top:310px;
    }
    .exc{
        width:23px;
        height:23px;
        position: absolute;
        left:370px;
        top:325px;
        float: left;
    }
    .vuser{
        position: relative;
        display: inline-block;
        top:-45px;
        left:210px;
    }
    .vpass{
        position: relative;
        display: inline-block;
        top:-40px;
        left:87px;
        z-index: 3;
    }
    .form-signin input[type="password"]{
        margin-top: -20px;
    }
    .vcode{
        position: relative;
        display: inline-block;
        top:20px;
        left:205px;
        z-index: 3;
        float: left;
    }
</style>
<script>
    $(function(){
//        验证码图标点击事件
        $('.exc').click(function(){
            $('.codepic').attr('src','index.php?c=index&a=code&rand='+Math.random());
        })
//        异步验证判断用户名是否存在
        $('input[name=username]').blur(function(){
            var username = $(this).val();
            $.ajax({
                type:'post',
                url:'index.php?c=user&a=vusername',
                data:{username:username},
                dataType:'json',
                success:function(names){
                    if(names.status){
                        $('.vuser').html("");
                    }else{
                        $('.vuser').html("<span style='color: red;font-weight: 600'>用户名不存在</span>");
                    }
                }
            })
        })

////        异步验证用户名密码是否匹配
        $('input[name=password]').blur(function(){
            var password = $(this).val();
            var username = $('input[name=username]').val();
            $.ajax({
                type:'post',
                url:'index.php?c=user&a=passuser',
                data:{username:username,password:password},
                dataType:'json',
                success:function(vals){
                    if(vals.status){
                        $('.vpass').html("");
                    }else{
                        $('.vpass').html("<span style='color: red;font-weight: 600'>用户名或密码错误</span>");
                    }
                }
            })
        })
//
//        异步验证验证码是否正确
        $('input[name=code]').blur(function(){
            var code = $(this).val();
            $.ajax({
                type:'post',
                url:'index.php?c=user&a=vcode',
                data:{code:code},
                dataType:'json',
                success:function(codes){
                    if(codes.status){
                        $('.vcode').html("");
                    }else{
                        $('.vcode').html("<span style='color: red;font-weight: 600'>验证码错误</span>");
                    }
                }
            })
        })

    })
</script>
</head>

<body>

<div class="signin">
	<div class="signin-head"><img src="./Public/login/images/test/head_120.png" alt="" class="img-circle"></div>
	<form class="form-signin" role="form" method="post" action="./index.php?c=user&a=login">
		<input type="text" class="form-control user" placeholder="用户名" required autofocus name="username"/>
        <div class="vuser"></div>
        <input type="password" class="form-control" placeholder="密码" required name="password"/>
        <div class="vpass"></div>
        <input type="text" id="code" class="form-control" placeholder="验证码" required autofocus name="code"/>
        <div class="vcode"></div>
        <img src="index.php?c=index&a=code" class="codepic" onclick="this.src=this.src+'&rand='+Math.random()">
        <img src="./Public/image/exchange.png" alt="" class="exc" ">
        <br><br>
        <button class="btn btn-lg btn-warning btn-block" type="submit">登录</button>
        <br>
		<label class="checkbox">
			<input type="checkbox" value="remember-me" name="auto"> 7天自动登录
		</label>
        <a href="index.php?c=user&a=register" id="reg">还没有账号？请注册</a>
	</form>
</div>

</body>
</html>
